How to get the Token balance, amount of Ether and transactions info of an Ethereum account using Web3

This post is the continuation of:

How to call methods of Ethereum Smart-Contracts from WordPress with MetaMask, Web3 and Javascript
How to call methods of Ethereum Smart-Contracts from WordPress with MetaMask, Web3 and Javascript (PART II)
How to store information in Ethereum with Smart-Contracts
How to read storage data from an Ethereum Smart-Contract using Web3 and MetaMask

In this post we want to see/get the amount/balance of Ether or Tokens of an Smart-Contract account using Web3 (with MetaMask Google Chrome plugin or Brave browser) and Javascript.

We can use this HTML+Javascript example code to read the info from this Token Contract: 0xf035755df96ad968a7ad52c968dbe86d52927f5b from the Rinkeby Test-net.

First add the script libraries:

http://rawgit.com/ethereum/web3.js/0.16.0/dist/web3.min.js
https://cdn.jsdelivr.net/npm/ethjs@0.3.0/dist/ethjs.min.js

Then add a new script code, like the below:

window.addEventListener('load', function() {
            // Check if Web3 has been injected by the browser:
            if (typeof web3 !== 'undefined') {
                // You have a web3 browser! Continue below!
                startApp(web3);
            } else {
                // Warn the user that they need to get a web3 browser
                // Or install MetaMask, maybe with a nice graphic.
            }
        });
        
        const contract_address = '0xf035755df96ad968a7ad52c968dbe86d52927f5b';
        var eth = null;
        function startApp(web3) {
            //alert("entro");
            document.getElementById("etherlog").innerHTML = "Enterng web3<br>";
            eth = new Eth(web3.currentProvider);
            //alert("llego");
            web3.eth.getBalance(contract_address, function (error, result) {
            try {
            if (!error){
		console.log('Ether:', web3.fromWei(result,'ether')); 
                document.getElementById("etherlog").innerHTML+=  web3.fromWei(result,'ether') + " ETH Account Balance<br>";
            }else
		console.log('Error: ', error);
            } catch ( err ) {
                console.log('Error: ', err.message);
            }});
            
            var addr = ('0xf035755df96ad968a7ad52c968dbe86d52927f5b');
            var contractAddr = ('0xf035755df96ad968a7ad52c968dbe86d52927f5b');
            // Get the address ready for the call, substring removes the '0x', as its not required
            var tknAddress = (addr).substring(2);
            // '0x70a08231' is the contract 'balanceOf()' ERC20 token function in hex. A zero buffer is required and then we add the previously defined address with tokens
            var contractData = ('0x70a08231000000000000000000000000' + tknAddress);
            web3.eth.call({
                to: contractAddr, // Contract address, used call the token balance of the address in question
                data: contractData // Combination of contractData and tknAddress, required to call the balance of an address 
            }, function(err, result) {
                if (result) { 
                    console.log('Tokens Owned: ' + web3.fromWei(result, 'ether')); // Change the string to be in Ether not Wei, and show it in the console
                    document.getElementById("etherlog").innerHTML+=  web3.fromWei(result,'ether') + " Tokens Account Balance<br>";
                } else {
                    console.log(err); // Dump errors here
                }
            });
            
            var ethTx = ('0x20037a996e83b5ba3dd9e75e6e6af6d50e60b6ee73c2a706df2172f80a18c34b');
            web3.eth.getTransaction(ethTx, function(err, result) { 
                if (!err) {
                    document.getElementById("etherlog").innerHTML+= 'Tx 0x20037a996e83b5ba3dd9e75e6e6af6d50e60b6ee73c2a706df2172f80a18c34b' + "<br>";
                    console.log('From Address: ' + result.from); 
                    document.getElementById("etherlog").innerHTML+= 'From Address: ' + result.from + "<br>";
                    console.log('To Address: ' + result.to); 
                    document.getElementById("etherlog").innerHTML+= 'To Address: ' + result.to + "<br>";
                    console.log('Ether Transacted: ' + (web3.fromWei(result.value, 'ether')));
                    document.getElementById("etherlog").innerHTML+= 'Ether Transacted: ' + (web3.fromWei(result.value, 'ether'))+ "<br>";
                } else {
                    console.log('Error!', err);
                }
            });
            
        }

And finally add the HTML code to see the results

<div id="etherlog">LOG</div>
<a href="https://rinkeby.etherscan.io/address/0xf035755df96ad968a7ad52c968dbe86d52927f5b#code" target="new">Account: 0xf035755df96ad968a7ad52c968dbe86d52927f5b</a>

If we save this HTML+Javascript code in a file and we push to the internet, we will see the balance of Tokens and Ether of the contract plus the last transaction info: